<template>
	<view class="flex-column-view">
		<view class="img-box">
			<view class="flex-1">
				<image class="img-1" src="https://free.picui.cn/free/2025/10/14/68ee701c38ed6.png" mode="aspectFill"></image>
				<image class="img-2" src="https://free.picui.cn/free/2025/10/14/68ee701bddc97.png" mode="aspectFill"></image>
			</view>
			<image class="img-3" src="https://free.picui.cn/free/2025/10/14/68ee701c8d0c0.png" mode="aspectFill"></image>
		</view>
		<view class="flex-1 content">
			<nut-form class="form-box" ref="formRef" :model-value="form" :rules="rules" label-position="top" star-position="right">
				<nut-form-item label="姓名" prop="realName" required>
					<nut-input
						v-model="form.realName"
						class="nut-input-text"
						placeholder="请输入姓名"
						type="text"
						max-length="20"
					/>
				</nut-form-item>
				<nut-form-item label="手机号" prop="mobile" required>
					<nut-input
						v-model="form.mobile"
						class="nut-input-text"
						placeholder="请输入手机号"
						type="digit"
						max-length="11"
					/>
				</nut-form-item>
				<nut-form-item label="授权码" prop="code" required>
					<nut-input
						v-model="form.code"
						class="nut-input-text"
						placeholder="请输入授权码"
						type="text"
						max-length="10"
					/>
				</nut-form-item>
			</nut-form>
			<nut-button block type="primary" :loading="loading" @click="submit">
				<text class="m-r-10">完成认证</text>
				<nut-icon name="rect-right"></nut-icon>
				<nut-icon name="rect-right"></nut-icon>
			</nut-button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { tkVerificationApi } from '@/api/public';

const formRef = ref()
const form = reactive({
	realName: '',
	mobile: '',
	code: ''
})
const loading = ref(false)

const rules = {
	realName: [
		{ required: true, message: '请填写姓名' },
	],
	mobile: [
		{ required: true, message: '请填写联系方式' },
	],
	code: [
		{ required: true, message: '请填写授权码' },
	]
}

const submit = () => {
	formRef.value?.validate().then(async ({ valid, errors }) => {
		if (valid) {
			try {
				loading.value = true
				await tkVerificationApi(form)
				uni.showToast({
					mask: true,
					title: '认证成功',
					icon: 'success',
					success: () => {
						uni.navigateBack()
					}
				})
			} catch {
				uni.showToast({
					mask: true,
					title: '认证失败',
					icon: 'error',
				})
			} finally {
				loading.value = false
			}
		}
	})
}
</script>

<style>
	page {
		background: linear-gradient(180deg, #FFEAC4 0%, #E8E8E8 100%);
	}
</style>

<style lang="scss" scoped>
	.img-box {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 40rpx 20rpx 70rpx;
		.img-1 {
			width: 408rpx;
			height: 46rpx;
		}
		.img-2 {
			width: 398rpx;
			height: 70rpx;
		}
		.img-3 {
			width: 206rpx;
			height: 202rpx;
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 60rpx;
		margin: 0 28rpx 72rpx;
		padding: 40rpx 42rpx 76rpx;
		border-radius: 40rpx;
		background-color: #fff;
		:deep(.nut-cell-group__wrap) {
			box-shadow: none;
		}
		:deep(.nut-form-item) {
			padding-left: 0;
			padding-right: 0;
		}
		:deep(.nut-input__input) {
			height: 104rpx;
			padding: 28rpx 28rpx;
			border-radius: 20rpx;
			background-color: #F6F8FA;
		}
		:deep(.nut-form-item.error.line::before) {
			display: none;
		}
		:deep(.nut-button) {
			height: 84rpx;
			font-size: 32rpx;
			background: #000;
		}
		:deep(.nut-icon-rect-right) {
			font-size: 28rpx !important;
			width: 16rpx !important;
			height: 22rpx !important;
			font-weight: 700;
			color: #FFC300;
		}
	}
</style>